<template>
	<view class="login-container">
		<view class="login-header">
			<text class="title">IT猴</text>
		</view>
		
		<view class="form-container">
			<view class="tab-header">
				<text :class="['tab-item', currentTab === 'login' ? 'active' : '']" @click="switchTab('login')">登录</text>
				<text :class="['tab-item', currentTab === 'register' ? 'active' : '']" @click="switchTab('register')">注册</text>
			</view>
			
			<!-- 登录表单 -->
			<view class="form" v-if="currentTab === 'login'">
				<view class="input-group">
					<input type="text" v-model="loginForm.account" placeholder="请输入用户名/手机号/邮箱" />
				</view>
				<view class="input-group">
					<input type="password" v-model="loginForm.password" placeholder="请输入密码" />
				</view>
				<view class="forgot-password" @click="forgotPassword">忘记密码？</view>
				<button class="submit-btn" @click="handleLogin">登录</button>
			</view>
			
			<!-- 注册表单 -->
			<view class="form" v-else>
				<view class="input-group">
					<input type="text" v-model="registerForm.username" placeholder="请输入用户名" />
				</view>
				<view class="input-group">
					<input type="email" v-model="registerForm.email" placeholder="请输入邮箱" />
				</view>
				<view class="input-group">
					<input type="text" v-model="registerForm.phone" placeholder="请输入手机号（选填）" />
				</view>
				<view class="input-group verification">
					<input type="text" v-model="registerForm.code" placeholder="请输入验证码" />
					<button class="code-btn" :disabled="isCountingDown" @click="getVerificationCode">
						{{ isCountingDown ? `${countdown}s后重试` : '获取验证码' }}
					</button>
				</view>
				<view class="input-group">
					<input type="password" v-model="registerForm.password" placeholder="请输入密码" />
				</view>
				<view class="input-group">
					<input type="password" v-model="registerForm.confirmPassword" placeholder="请确认密码" />
				</view>
				<button class="submit-btn" @click="handleRegister">注册</button>
			</view>
		</view>
		
		<!-- 第三方登录 -->
		<view class="third-party">
			<view class="divider">
				<view class="line"></view>
				<text>其他登录方式</text>
				<view class="line"></view>
			</view>
			<view class="icons">
				<view class="icon-item" @click="thirdPartyLogin('wechat')">
					<uni-icons type="weixin" size="30" color="#07c160"></uni-icons>
				</view>
				<view class="icon-item" @click="thirdPartyLogin('qq')">
					<uni-icons type="qq" size="30" color="#2376B7"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import userApi from '../../api/user'

export default {
	data() {
		return {
			currentTab: 'login',
			loginForm: {
				account: '',
				password: ''
			},
			registerForm: {
				username: '',
				email: '',
				phone: '',
				code: '',
				password: '',
				confirmPassword: ''
			},
			isCountingDown: false,
			countdown: 60
		}
	},
	methods: {
		switchTab(tab) {
			this.currentTab = tab
		},
		async handleLogin() {
			if (!this.loginForm.account || !this.loginForm.password) {
				uni.showToast({
					title: '请填写完整信息',
					icon: 'none'
				})
				return
			}
			
			try {
				uni.showLoading({
					title: '登录中...'
				})
				
				const result = await userApi.loginByPassword({
					account: this.loginForm.account,
					password: this.loginForm.password
				})
				
				// 保存token
				uni.setStorageSync('token', result.token)
				
				uni.hideLoading()
				uni.showToast({
					title: '登录成功',
					icon: 'success'
				})
				
				// 登录成功后跳转
				uni.switchTab({
					url: '/pages/index/index'
				})
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: error.message || '登录失败',
					icon: 'none'
				})
			}
		},
		async handleRegister() {
			if (!this.validateRegisterForm()) {
				return
			}
			
			try {
				uni.showLoading({
					title: '注册中...'
				})
				
				await userApi.register({
					username: this.registerForm.username,
					email: this.registerForm.email,
					phone: this.registerForm.phone || '',
					code: this.registerForm.code,
					password: this.registerForm.password
				})
				
				uni.hideLoading()
				uni.showToast({
					title: '注册成功',
					icon: 'success'
				})
				
				// 清空表单
				this.registerForm = {
					username: '',
					email: '',
					phone: '',
					code: '',
					password: '',
					confirmPassword: ''
				}
				
				// 切换到登录页
				this.currentTab = 'login'
			} catch (error) {
				uni.hideLoading()
				uni.showToast({
					title: error.message || '注册失败',
					icon: 'none'
				})
			}
		},
		validateRegisterForm() {
			if (!this.registerForm.username || !this.registerForm.email || 
				!this.registerForm.password || !this.registerForm.confirmPassword ||
				!this.registerForm.code) {
				uni.showToast({
					title: '请填写必要信息',
					icon: 'none'
				})
				return false
			}
			
			// 验证邮箱格式
			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
			if (!emailRegex.test(this.registerForm.email)) {
				uni.showToast({
					title: '请输入正确的邮箱格式',
					icon: 'none'
				})
				return false
			}
			
			if (this.registerForm.password !== this.registerForm.confirmPassword) {
				uni.showToast({
					title: '两次密码输入不一致',
					icon: 'none'
				})
				return false
			}
			return true
		},
		async getVerificationCode() {
			if (!this.registerForm.email && !this.registerForm.phone) {
				uni.showToast({
					title: '请输入邮箱或手机号',
					icon: 'none'
				})
				return
			}
			
			try {
				// 判断发送验证码的方式
				if (this.registerForm.email) {
					await userApi.sendEmailCode(this.registerForm.email)
				} else {
					await userApi.sendSMSCode(this.registerForm.phone)
				}
				
				// 开始倒计时
				this.isCountingDown = true
				this.countdown = 60
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						this.isCountingDown = false
						clearInterval(timer)
					}
				}, 1000)
				
				uni.showToast({
					title: `验证码已发送至${this.registerForm.email ? '邮箱' : '手机'}`,
					icon: 'success'
				})
			} catch (error) {
				uni.showToast({
					title: error.message || '验证码发送失败',
					icon: 'none'
				})
			}
		},
		async forgotPassword() {
			// TODO: 实现忘记密码逻辑
			uni.showToast({
				title: '暂未开放此功能',
				icon: 'none'
			})
		},
		async thirdPartyLogin(platform) {
			// TODO: 实现第三方登录逻辑
			uni.showToast({
				title: `${platform}登录功能开发中`,
				icon: 'none'
			})
		}
	}
}
</script>

<style lang="scss">
.login-container {
	min-height: 100vh;
	background-color: #ffffff;
	padding: 0 30rpx;
	
	.login-header {
		padding-top: 100rpx;
		text-align: center;
		margin-bottom: 60rpx;
		
		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
		}
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.form-container {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 0 20rpx rgba(0,0,0,0.05);
		
		.tab-header {
			display: flex;
			justify-content: center;
			margin-bottom: 40rpx;
			
			.tab-item {
				font-size: 32rpx;
				color: #666;
				padding: 20rpx 40rpx;
				position: relative;
				
				&.active {
					color: #007AFF;
					font-weight: bold;
					
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 40rpx;
						height: 4rpx;
						background: #007AFF;
						border-radius: 2rpx;
					}
				}
			}
		}
		
		.form {
			.input-group {
				margin-bottom: 30rpx;
				
				input {
					width: 100%;
					height: 90rpx;
					background: #F8F8F8;
					border-radius: 45rpx;
					padding: 0 40rpx;
					font-size: 28rpx;
				}
				
				&.verification {
					display: flex;
					align-items: center;
					gap: 20rpx;
					
					input {
						flex: 1;
					}
					
					.code-btn {
						width: 200rpx;
						height: 90rpx;
						line-height: 90rpx;
						font-size: 24rpx;
						color: #007AFF;
						background: #F0F7FF;
						border-radius: 45rpx;
						padding: 0;
						
						&[disabled] {
							background: #F5F5F5;
							color: #999;
						}
					}
				}
			}
		}
		
		.forgot-password {
			text-align: right;
			font-size: 24rpx;
			color: #007AFF;
			margin-bottom: 40rpx;
		}
		
		.submit-btn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			background: #007AFF;
			color: #fff;
			font-size: 32rpx;
			border-radius: 45rpx;
			margin-top: 20rpx;
		}
	}
	
	.third-party {
		margin-top: 60rpx;
		
		.divider {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			
			.line {
				width: 100rpx;
				height: 1px;
				background: #E5E5E5;
			}
			
			text {
				color: #999;
				font-size: 24rpx;
				margin: 0 20rpx;
			}
		}
		
		.icons {
			display: flex;
			justify-content: center;
			gap: 60rpx;
			
			.icon-item {
				width: 80rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #F8F8F8;
				border-radius: 50%;
			}
		}
	}
}
</style> 